<template>
  <div
      style="height: 60px;width: 100%;border-bottom: 1px solid #ccc;box-shadow: rgba(154,154,154,0.91) 1px 0 8px;margin-bottom: 5px;background: white">
    <el-row justify="center" style="height: 100%;width: 100%">
      <el-col :xl="18" :lg="18" :md="24" style="width: 100%;height: 100%;">
        <div class="header">
          <!--            logo 菜单-->
          <div style="display: flex;align-items: center;">
            <img src="../assets/logo.png" alt="Logo" style="height: 45px;width: 100px;cursor: pointer" @click="toHomeBtn">
            <div style="margin-left: 35px">
              <el-button @click="toHomeBtn" type="text" style="color: #556">首页</el-button>
              <template v-for="item in SortList" :key="item.url_name">
                <el-button style="margin-left: 25px;color: #556" type="text" @click="toClassifyBtn(item.url_name)">{{ item.name }}</el-button>
              </template>
              <el-button style="margin-left: 25px;color: #556" type="text">项目</el-button>
            </div>
          </div>
          <!--            登录 搜索-->
          <div style="display: flex;align-items: center">
            <el-input size="mini" style="margin-right: 20px" placeholder="搜索" v-model="searchCon" @keyup.enter="searchBtn">
              <template #append>
                <el-button size="mini" :icon="Search" @click="searchBtn"></el-button>
              </template>
            </el-input>
            <el-button v-if="isLogin !== true" size="mini" @click="toLoginBtn">登录</el-button>
            <el-button v-else size="mini" @click="toLoginBtn">进入后台</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from "./Header";
import {Search} from "@element-plus/icons";

export default {
  name: "Header",
  setup(){
    return{
      ...Header(),
      Search
    }
  }
}
</script>

<style scoped>
.header {
  height: 60px;
  display: flex;
  /*min-width: 700px;*/
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
</style>